<template>
	<page-frame page-name="商城">
		<template #sticky>
			<u-search height="72rpx" placeholder="搜索商品" :showAction="false" bgColor="#ffffff"
				v-model="page.params.keyWord" @search="search" @clear="clear" @custom="search"></u-search>
			<view class="u-flex u-flex-items-center u-m-t-32">
				<tag-btn v-for="(tag,index) in categoryList" :key="index" :name="tag.name"
					:active="tag.value === page.params.category" @search="tagClick(tag)"></tag-btn>
			</view>
		</template>
		<template #area>
			<view class="shop-list" v-if="page.list.length > 0">
				<block v-for="goods in page.list" :key="goods.id">
					<mall-card :goods="goods"></mall-card>
				</block>
			</view>
			<EmptyData v-else text="暂无商品"></EmptyData>
		</template>
	</page-frame>
</template>

<script setup>
	import {
		goodsList
	} from '@/api/goods.js';
	import PageFrame from '@/components/PageFrame.vue';
	import MallCard from '@/components/MallCard.vue';
	import EmptyData from '@/components/EmptyData.vue'
	import TagBtn from '@/components/TagBtn.vue';
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from 'vue';
	const keyword = ref('')
	const categoryList = [{
		name: '推荐',
		value: ''
	}, {
		name: '日用品',
		value: '日用品'
	}, {
		name: '健身',
		value: '健身'
	}, {
		name: '乒乓球',
		value: '乒乓球'
	}];
	const page = ref({
		list: [],
		params: {
			keyWord: '',
			category: ''
		}
	})

	const tagClick = ({
		value
	}) => {
		page.value.params.category = value
		search()
	}

	const search = () => {
		page.value.params.keyword = keyword.value
		goodsList(page.value.params).then(resp => {
			page.value.list = resp.data || []
		})
	}
	search()

	onShareAppMessage(() => {
		return {
			title: '德宝乒乓球-' + '商城',
		}
	})
	onShareTimeline(() => {
		return {
			title: '德宝乒乓球-' + '商城',
		}
	})
</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.shop-list {
		margin-top: 12px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 18px;
	}
</style>